<div id="top"></div>
<div class="row" style="background:url(img/chill.jpg);background-size:cover;background-attachment: fixed;">
<div class="large-12 column" style="padding-top:2rem;padding-bottom:2rem;background:rgba(0,158,161,.7);">
<div class="large-11 large-centered column">
    <h4 style="color:white;">Behomebased Forum</h4>

</div>

</div>
</div>

<div class="forum-rw-frms row">
  <div class="large-11 large-centered column">
    <div class="large-12 column">
      <div class="large-12 column" style="padding:0rem;">
          <div class="selectpost large-2 column"  style="padding:0;">
            <div class="large-12 column"  style="padding:0;">
              <select style="border:none;margin:0;">
                <option>Recent Activity</option>
                <option>Most Helpful</option>
                <option>Most Followed</option>
              </select>
            </div>

          </div>
          <div class="selectpost large-2 column end"  style="padding:0;">
            <div class="large-12 column" style="padding:0;">
              <select style="border:none;margin:0;">
                <option>Web Programming</option>
                <option>Freelance Writer</option>
                <option>Web Designing</option>
              </select>
            </div>
          </div>
          <div class="selectpost large-2 column end"  style="padding:0;">
            <div class="large-12 column" style="padding:0;">
              <select style="border:none;margin:0;">
                <option>Ascending</option>
                <option>Descending</option>
              </select>
            </div>
          </div>
          <div class="selectpost large-2 column end"  style="padding:0;">
            <div class="large-12 column">
              <a href="" class="tiny radius button" style="margin-top:.1rem;background:#009EA1;">Show Threads</a>
            </div>
          </div>

          <div class="selectpost large-4 column end"  style="padding:0;">
            <div class="large-12 column" style="padding:0;">
              <form>
                <div class="row collapse">
                    <div class="small-3 large-2 columns">
                      <span class="prefix" style="border:none;"><i class="fa fa-search"></i></span>
                    </div>
                    <div class="small-9 large-10 columns">
                      <input type="text" placeholder="Search" style="border:none;">
                    </div>
                </div>
              </form>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="forum-rw-content row">
<div class="large-11 large-centered column">

  <div class="forumcard large-3 column">
    <div class="card-wrap large-12 column">

    <div class="card-dp large-12 column" style="background:url(img/user_dp/no-dp1.jpg);background-size:100% 100%;">
      <div id="hov" class="" >
        <a data-reveal-id="changedp"><i id="dodp" class="trans fa fa-camera-retro fa-2x"></i></a>
          <div class="card-opac">
                 <p class="text-center">Logged in as:<a> grin_lantern</a></p>
          </div>
      </div>
    </div>

    <div class="large-12 column" style="padding-top:.8rem;">
      <div class="user-rating" data-average="10.34" data-id="1" style="position:absolute;margin:0 auto;"></div>
    </div>
              
    <div class="forum-pro large-12 column">
          <ul class="text-center inline-list">
            <li class="<?php if(@$page_name=='Forum') echo "active"; ?>">
              <a class="<?php if(@$page_name=='Forum') echo "active"; ?>" href="<?=BASE_URI ?>forum">Feeds</a>
            </li>
            <li class="<?php if(@$page_name=='ForumProfile') echo "active"; ?>">
              <a class="<?php if(@$page_name=='ForumProfile') echo "active"; ?>" href="<?=BASE_URI ?>forum/profile">My Forum</a>
            </li>
            <li class="<?php if(@$page_name=='CreateThread') echo "active"; ?>"><a class="<?php if(@$page_name=='CreateThread') echo "active"; ?>" href="<?=BASE_URI ?>forum/create">Create Post</a></li>
          </ul>
    </div>

    <ul class="forum-ul">
      <li><a href="">Show Subscribed threads <span class="success label right"><small>23</small></span></a></li>
      <li><a href="">Show My Threads</a></li>
      <li><a href="">Show My Posts</a></li>
      <li><a href="">Unanswered threads</a></li>
    </ul>
 
    </div>
  </div>

  <div class="forum-wrapper large-9 column">
    <?php
      if(@$page_name=='Forum') {
        $this->view->partial('common/forum');
      }
      elseif (@$page_name=='CreateThread') {
        $this->view->partial('forum/create');
      }
      elseif (@$page_name=='ForumProfile') {
        echo 'Profile';
      }
     ?>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('.company-rating').jRating({
    });

    $('.user-rating').jRating({
      type:'small',
      length : 5,
      decimalLength : 1,
    });
  });
</script>


<style type="text/css">
.opaccam {
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    border-radius:.43rem;
    transition: background 0.2s ease,
    padding 0.8s linear;
}
.showicon {
    transition:  0.2s ease;
    color:#009EA1 !important; position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
.trans {
  color:transparent !important;
  font-size: 7rem;
}
</style>

<script type="text/javascript">
  $('#hov').hover(
    function(){ $(this).addClass('opaccam') },
    function(){ $(this).removeClass('opaccam') }
  )
  $('#hov').hover(
    function(){ $('#dodp').addClass('showicon').removeClass('trans') },
    function(){ $('#dodp').removeClass('showicon').addClass('trans') }
)
</script>




